
import { ProCard } from '@ant-design/pro-components';
import { history, NavLink } from 'umi';
import {
  Upload,
  Button,
  message,
} from 'antd'
import React, { useState, useEffect } from 'react';
import axios from 'axios'

import './index.less'
import '@/static/index.less'
import '@/static/all.less' //全局样式

interface Props {
  name: string;
}

const props = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

// 脚手架示例组件
const Guide = ({ }: Props) => {
  // const { name } = props;
  let [notification, set_notification] = useState([]);
  let [journalism, set_journalism] = useState([]);
  // 触发图片新闻变色
  let [newsref, set_newsref] = useState(4);
  // 触发通知公告变色
  let [noti, setnoti] = useState(0);
  // 点击变色
  let [acitve_noti, set_acitve_noti] = useState(0);
  // 实时时间
  let [datee, set_datee] = useState('');
  let [timee, settime] = useState('');


  useEffect(() => {
    renderList();
    timerStart();
  }, [])



  // 时间获取
  let showTime = () => {
    var date = new Date();
    // 年月日
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();

    // 时分秒
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();

    // 周几
    var str = '';
    var week = new Date().getDay();
    if (week == 0) {
      str = '星期日';
    } else if (week == 1) {
      str = '星期一';
    } else if (week == 2) {
      str = '星期二';
    } else if (week == 3) {
      str = '星期三';
    } else if (week == 4) {
      str = '星期四';
    } else if (week == 5) {
      str = '星期五';
    } else if (week == 6) {
      str = '星期六';
    }
    if (second <= 9) {
      second = '0' + second;
    }
    // 实时显示
    let ccc = year + '-' + month + '-' + day + ' ' + str;
    let aaa = hour + ':' + minute + ':' + second;
    set_datee(ccc);
    settime(aaa);
  };

  let timerStart = () => {
    var timer = setInterval(() => showTime(), 1000);
  };


  const renderList = () => {
    axios.get('http://localhost:3000/daywork/get_notification').then((val) => {
      set_notification(val.data.data.slice(0, 11));

    });
    axios.get('http://localhost:3000/daywork/get_journalism').then((val) => {
      set_journalism(val.data.data.slice(0, 3));
      // console.log(val.data.data);

    });
  };

  // let [tabsList, setTabsList] = useState([
  //   { label: '日常工作', key: 'daily-work' }
  // ]);

  return (
    <div className='card'>
      {/* 通知公告 */}
      <ProCard
        // className={style.card}
        title="通知公告"
        extra={
          <>
            {/* 右上角橙色按钮 */}
            <img src={require('@/static/image/more_bg.gif')} alt="" className='btn'
              onClick={() => {
                // 此处填写跳转网页代码
                console.log('填写代码');
              }}
            />
          </>
        }
        headStyle={{ color: '#5377b6', fontWeight: 600 }}
        bordered
        headerBordered

      >
        <ul>
          {notification.map((item, index) => {
            return (
              <li key={index}>
                <div>
                  <span></span>
                  <NavLink
                    className={acitve_noti === index + 1 ? 'a_active' : 'a'}
                    to={{ pathname: '/work1', state: item }}
                    onClick={() => { }}
                    onMouseEnter={() => {
                      setnoti(index + 1);
                      // console.log(index + 1);
                    }}
                    onMouseLeave={() => {
                      setnoti(0);
                    }}
                    style={noti === index + 1 ? { color: '#0783e4' } : {}}
                  >
                    {item.title}
                  </NavLink>
                </div>
                <div className="box_content_publish">{item.publish}</div>
              </li>
            );
          })}
        </ul>
      </ProCard>
      {/* 图片新闻 */}
      <ProCard
        title="图片新闻"
        extra={
          <>
            {/* 右上角橙色按钮 */}
            <img src={require('@/static/image/more_bg.gif')} alt="" className='btn'
              onClick={() => {
                // 此处填写跳转网页代码
                console.log('填写代码');
              }}
            />
          </>
        }
        bordered
        headerBordered
      >
        {journalism.map((item, index) => {
          return (
            <div
              className="box_news_one"
              key={index}
              onMouseEnter={() => {
                set_newsref(index);
              }}
              onClick={() => {
                history.push('/work2', item);
              }}
              onMouseLeave={() => {
                set_newsref(4);
              }}
              style={
                newsref === index ? { backgroundColor: '#eaf2ff' } : {}
              }
            >
              <div className="box_news_left">
                <img src={item.title_pic} alt="" />
              </div>
              <div className="box_news_right">
                <div className="box_news_right_top">
                  <div
                    className="box_news_right_title"
                    style={newsref === index ? { color: '#0783e4' } : {}}
                  >
                    {item.title}
                  </div>
                  <div className="box_news_right_publish">
                    {item.publish}
                  </div>
                </div>
                <div className="box_news_right_bottom">
                  {item.content.map((items, index) => {
                    if (index <= 3) {
                      return <p key={index}>{items}</p>;
                    }
                  })}
                </div>
              </div>
            </div>
          );
        })}

      </ProCard>
      <ProCard
        title="考勤打卡"
        extra={
          <>
            {/* 右上角橙色按钮 */}
            <img src={require('@/static/image/more_bg.gif')} alt="" className='btn'
              onClick={() => {
                // 此处填写跳转网页代码
                console.log('填写代码');
              }}
            />
          </>
        }
        bordered
        headerBordered
      >
        <div className="box_timecard">
          <div className="box_timecard_top">
            <div className="box_timecard_top_time">
              <div className="datee">{datee}</div>
              <div className="timee">{timee}</div>
            </div>
            <div className="box_timecard_top_active">
              <Upload {...props}>
                {/* <Button icon={<UploadOutlined />}>Click to Upload</Button> */}
                <div className="onpayload">上传照片...</div>
              </Upload>
              <Button type="text" className="button_active">
                更新签退
              </Button>
            </div>
          </div>
          <div className="box_timecard_bottom">
            <div className="box_timecard_bottom_all">
              <div className="box_timecard_bottom_one">
                上班打卡时间: 08:45
                <span
                  style={{
                    backgroundColor: '#1e90ff',
                    fontSize: '12px',
                    color: 'white',
                  }}
                >
                  电脑
                </span>
                <span
                  style={{
                    backgroundColor: '#808080',
                    fontSize: '12px',
                    color: 'white',
                  }}
                >
                  无图
                </span>
                <span
                  style={{
                    backgroundColor: '#ff0000',
                    fontSize: '12px',
                    color: 'white',
                  }}
                >
                  正常
                </span>
              </div>
              <div className="box_timecard_bottom_one">
                <div className="box_timecard_bottom_one_top">
                  上班打卡时间: 08:45
                  <span
                    style={{
                      backgroundColor: '#1e90ff',
                      fontSize: '12px',
                      color: 'white',
                    }}
                  >
                    电脑
                  </span>
                  <span
                    style={{
                      backgroundColor: '#808080',
                      fontSize: '12px',
                      color: 'white',
                    }}
                  >
                    无图
                  </span>
                </div>
                <div className="box_timecard_bottom_one_bottom">
                  打卡地点： 127.0.0.1
                </div>
              </div>
            </div>
          </div>
        </div>
      </ProCard>
       {/* 我的申请 */}
       <ProCard
        // className={style.card}
        title="我的申请"
        extra={
          <>
            {/* 右上角橙色按钮 */}
            <img src={require('@/static/image/more_bg.gif')} alt="" className='btn'
              onClick={() => {
                // 此处填写跳转网页代码
                console.log('填写代码');
              }}
            />
          </>
        }
        headStyle={{ color: '#5377b6', fontWeight: 600 }}
        bordered
        headerBordered

      >
        <ul>
          {notification.map((item, index) => {
            return (
              <li key={index}>
                <div>
                  <span></span>
                  <NavLink
                    className={acitve_noti === index + 1 ? 'a_active' : 'a'}
                    to={{ pathname: '/work1', state: item }}
                    onClick={() => { }}
                    onMouseEnter={() => {
                      setnoti(index + 1);
                      // console.log(index + 1);
                    }}
                    onMouseLeave={() => {
                      setnoti(0);
                    }}
                    style={noti === index + 1 ? { color: '#0783e4' } : {}}
                  >
                    {item.title}
                  </NavLink>
                </div>
                <div className="box_content_publish">{item.publish}</div>
              </li>
            );
          })}
        </ul>
      </ProCard>
       {/* 我的待办 */}
       <ProCard
        title="我的待办"
        extra={
          <>
            {/* 右上角橙色按钮 */}
            <img src={require('@/static/image/more_bg.gif')} alt="" className='btn'
              onClick={() => {
                // 此处填写跳转网页代码
                console.log('填写代码');
              }}
            />
          </>
        }
        headStyle={{ color: '#5377b6', fontWeight: 600 }}
        bordered
        headerBordered

      >
        <ul>
          {notification.map((item, index) => {
            return (
              <li key={index}>
                <div>
                  <span></span>
                  <NavLink
                    className={acitve_noti === index + 1 ? 'a_active' : 'a'}
                    to={{ pathname: '/work1', state: item }}
                    onClick={() => { }}
                    onMouseEnter={() => {
                      setnoti(index + 1);
                      // console.log(index + 1);
                    }}
                    onMouseLeave={() => {
                      setnoti(0);
                    }}
                    style={noti === index + 1 ? { color: '#0783e4' } : {}}
                  >
                    {item.title}
                  </NavLink>
                </div>
                <div className="box_content_publish">{item.publish}</div>
              </li>
            );
          })}
        </ul>
      </ProCard>
       {/* 我的一般 */}
       <ProCard
        // className={style.card}
        title="我的一般"
        extra={
          <>
            {/* 右上角橙色按钮 */}
            <img src={require('@/static/image/more_bg.gif')} alt="" className='btn'
              onClick={() => {
                // 此处填写跳转网页代码
                console.log('填写代码');
              }}
            />
          </>
        }
        headStyle={{ color: '#5377b6', fontWeight: 600 }}
        bordered
        headerBordered

      >
        <ul>
          {notification.map((item, index) => {
            return (
              <li key={index}>
                <div>
                  <span></span>
                  <NavLink
                    className={acitve_noti === index + 1 ? 'a_active' : 'a'}
                    to={{ pathname: '/work1', state: item }}
                    onClick={() => { }}
                    onMouseEnter={() => {
                      setnoti(index + 1);
                      // console.log(index + 1);
                    }}
                    onMouseLeave={() => {
                      setnoti(0);
                    }}
                    style={noti === index + 1 ? { color: '#0783e4' } : {}}
                  >
                    {item.title}
                  </NavLink>
                </div>
                <div className="box_content_publish">{item.publish}</div>
              </li>
            );
          })}
        </ul>
      </ProCard>
    </div>
  );
};

export default Guide;
